﻿<!DOCTYPE html>
<html lang="ch">

<head>
	<meta charset="utf-8" />
	<title>缘来是你</title>
	<meta content="width=device-width, initial-scale=1.0" name="viewport" />
	<meta name="description" content="">
	<meta name="keywords" content="" />
	<meta name="author" content="">
	<meta name="MobileOptimized" content="320" />
	<!--srart theme style -->
	<link rel="stylesheet" type="text/css" href="/css/animate.css">
	<link rel="stylesheet" type="text/css" href="/css/bootstrap.css">
	<link rel="stylesheet" type="text/css" href="/css/font-awesome.css">
	<link rel="stylesheet" type="text/css" href="/css/owl.carousel.css">
	<link rel="stylesheet" type="text/css" href="/css/owl.theme.default.css">
	<link rel="stylesheet" type="text/css" href="/css/magnific-popup.css">
	<link rel="stylesheet" type="text/css" href="/css/fonts.css">
	<link rel="stylesheet" type="text/css" href="/css/style.css">
	<link rel="stylesheet" type="text/css" href="/css/llg/login.css">
	<!-- tools -->
	<script src="/js/tools/tool.js"></script>
    <!-- Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- Axios -->
	<script src="/js/axios-0.18.0.js"></script>
	<!-- JQuery -->
	<script type="text/javascript" src="/js/jquery.js"></script>
</head>

<body>



	<!-- preloader Start -->
	<div class="llg-main-container">
		<div id="preloader">
			<div id="status"><img src="/images/header/preloader.gif" id="preloader_image" alt="loader">
			</div>
		</div>
		<!-- Header Wrapper Start -->
		<div section-scroll='0' class="wd_scroll_wrap">
			<div class="wd_slider_wrapper wd_single_index_menu">
				<div id="snow"></div>
				<div class="menu_fixed animated fadeInDown" style="width: 100vw;">
					<div class="col-lg-3 col-md-12 col-sm-12 col-xs-12">
						<div class="wd_logo">
							<img src="/images/header/logo.png" alt="Logo" title="Logo" class="img-responsive">
							<button class="wd_menu_btn"><i class="fa fa-bars" aria-hidden="true"></i></button>
						</div>
					</div>
					<div class="col-lg-9 col-md-12 col-sm-12 col-xs-12">
						<div class="wd_mainmenu_wrapper">
							<div class="wd_main_menu_wrapper">
								<div class="wd_main_menu wd_single_index_menu">
									<ul>
										<li><a href="0">Home</a></li>
										<li><a href="1">About Us</a></li>
										<li><a href="2">Love Story</a></li>
										<li><a href="3">Events</a></li>
										<li><a href="4">Rsvp</a></li>
										<li><a href="5">Family</a></li>
										<li><a href="6">Gallery</a></li>
										<li><a href="7">Blog</a></li>
										<li><a href="8">Contact Us</a></li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- 左侧文字 -->
				<div class="wd_slider_textinfo">
					<img src="/images/header/name.png" alt="Slider Image" class="img-responsive">
					<h3>20 may 2018</h3>
					<h1>Save The Date</h1>
					<div class="clearfix"></div>
					<img src="/images/content/heading.png" alt="Heading" class="img-responsive">
				</div>
			</div>
		</div>

		<div id="loginApp" class="llg-form-container">
			<div class="wd_guest_formbox">
				<span>缘，妙不可言</span>
				<h4>Rsvp Here!</h4>
				<div class="wd_guest_form">
					<div class="row">
						<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
							<label>Telephone :</label>
							<input class="llg-btn-hover" type="text" v-model="loginData.telephone">
						</div>
						<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
							<label>SMS Code :</label>
							<input class="llg-btn-hover" type="text" v-model="loginData.SMSCode">
						</div>
						<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
							<!-- <button>获取验证码</button> -->
							<label>&nbsp;</label>
							<button class="llg-btn-sms llg-btn-hover" type="button" @click="getSMSCode()">
								<span v-if="interval==0">Get SMSCode</span>
                                <span v-if="interval!=0">Retry After {{interval}}s</span>
							</button>
						</div>
						<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
							<div class="wd_btn">
								<a href="javascript:void(0);" @click="login()">I am attending</a>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="llg-message-box" style="display: none;">
				{{msg}}
			</div>
		</div>
		<script>
			var loginApp = new Vue({
				el: "#loginApp",
				data: {
					loginData: {
						telephone: '',
						SMSCode: ''
					},
					msg: '',
					isLogged: false,
					from: '',
					interval: 0
				},
				mounted() {
					let from = getUrlParam('from');
					if (from) {
						this.from = from;
					}
				},
				methods: {
					// 请求登录、注册
					login() {
						if (
							this.isTelephoneOK() &&
							this.isSMSCodeOK()) {
							axios.post('/api/oauth/login', this.loginData).then(res => {
								if (res.data.flag) {
									this.showMessage('登录成功，即将跳转页面');
									// 登录、注册成功后跳转页面
									this.redirect();
								} else {
									this.showMessage('验证码错误，请重试');
								}
							});
						}
					},
					// 请求短信验证码
					getSMSCode() {
						if (this.interval != 0) {
							return;
						}
						if (this.isTelephoneOK()) {
							this.interval = 60;
							let timer = setInterval(() => {
								this.interval--;
								if (this.interval <= 0) {
									this.interval = 0;
									clearInterval(timer);
								}
							}, 1000);
							axios.post('http://localhost:10090/api/userCenter/send4Login', {
								telephone: this.loginData.telephone
							}).then(res => {
								if (res.data.flag) {
									this.showMessage('验证码发送成功');
								} else {
									this.showMessage('服务器正忙，请稍后重试');
								}
							});
						}
					},
					isTelephoneOK() {
						let flag = new RegExp("^(13|15|18|14)[0-9]{9}$").test(this.loginData.telephone);
						if (!flag) {
							this.showMessage('手机号格式错误！');
						}
						return flag;
					},
					isSMSCodeOK() {
						let flag = new RegExp("^.{4}$").test(this.loginData.SMSCode);
						if (!flag) {
							this.showMessage('验证码格式错误');
						}
						return flag;
					},
					// 跳转登录前页面
					redirect() {
						if (this.from) {
							location.href = this.from;
						}
					},
					// 消息框
					showMessage(message) {
						if (!message) {
							return;
						}
						this.msg = message;
						$(".llg-message-box").fadeIn();
						setTimeout(() => {
							$(".llg-message-box").fadeOut();
						}, 2000);
					}
				},
				
			});
		</script>
		
	</div>

	<script type="text/javascript" src="/js/bootstrap.js"></script>
	<script type="text/javascript" src="/js/smoothscroll.js"></script>
	<script type="text/javascript" src="/js/owl.carousel.js"></script>
	<script type="text/javascript" src="/js/modernizr.js"></script>
	<script type="text/javascript" src="/js/jquery.magnific-popup.js"></script>
	<script type="text/javascript" src="/js/wow.js"></script>
	<script type="text/javascript" src="/js/custom.js"></script>
	<script>
		$(window).on("load", function () {
			var wow = new WOW({
				boxClass: 'wow',
				animateClass: 'animated',
				offset: 0,
				mobile: true,
				live: true
			});
			wow.init();
		});
	</script>
</body>

</html>